<template>
	<view>
		<!-- 顶部导航栏 -->
		<view class="select_warp">
			<view class="manage_tab">
				<view class="tab_array">
					<image :src="BASE_IMG_URL+'ss.png'"  mode="scaleToFill"></image>
					<input type="text" :class="name ? 'valueactive' : '' " @confirm="doSearch"
						v-model="name" placeholder="线索名称" class="li_box" />
				</view>
				<view class="tab_screen" @click="showSearch = true">
					<image :src="BASE_IMG_URL+'shaixuan.png'"  mode="scaleToFill"></image>
				</view>
			</view>
			<view class="warpbox" v-if="showSearch" @tap.stop="showSearch = false">
				<scroll-view scroll-y class="scrollbox" style="height:800rpx;background:#fff;" >
					<!--筛选模块  -->
					<view class="screen_content"  @tap.stop.prevent>
						
						<view class="fir_li">
							<view class="li_label">归属人</view>
							<picker @change="changeAscrip" :value="ascripIndex" :range="ascripList" :range-key="'name'">
								<view class="li_box">
									<view class="form_right">
										<view :class="ascripList[ascripIndex] ? 'valueactive' : '' ">{{ascripList[ascripIndex] ? ascripList[ascripIndex].name : '点击选择'}}</view>
										<view class="iconfont icon-arrows_right"></view>
									</view>
								</view>
							</picker>
						</view>
						<view class="fir_li">
							<view class="li_label">线索创建时间</view>
							<view class="li_box" style="display: flex;">
								<picker @change="changeStartTime" mode="date" style="width:50%;border-right:1rpx solid #CCCCCC">
									<view class="form_right">
										<view style="flex:1;text-align: center;" :class="start_time ? 'valueactive' : '' ">{{start_time ? start_time : '开始时间'}}</view>
							
									</view>
								</picker>
								<picker @change="changeEndTime" mode="date" style="width:50%">
								<view class="form_right">
									<view style="flex:1;text-align: center;" :class="end_time ? 'valueactive' : '' ">{{end_time ? end_time : '结束时间'}}</view>
								
								</view>
								</picker>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="button_bottom">
					<view @tap.stop="reset">重置</view>
					<view @tap.stop="sureQuery">确定</view>
				</view>
			</view>
		</view>
		<!-- 内容模块 -->
		<view class="clues_content">
			<view class="clues_item" v-for="(item,index) in list" :key="index">
				<view class="info_head">
					<view style="width: #333333; font-size: 34rpx;">{{item.name ? item.name : '--'}}</view>
				</view>
				<view class="info_main" @click="moreClick(item)">
					<view class="main_left">
						<view class="left_followUp">
							<view>下次跟进时间：{{item.next_time ? item.next_time : '--'}}</view>
						</view>
						<view class="left_star">
							<view>客户星级：</view>
							<view>
								<u-rate :count="5" v-model="item.level" disabled active-color="#FFD049" inactive-color="#b2b2b2" :size="30" :gutter="10"></u-rate>
							</view>
						</view>
						<view class="left_foot">
							<view class="l_box">
								<span>{{item.source ? item.source : '--'}}</span>
							</view>
						</view>
					</view>
					<view class="main_right">
						<image :src="item.owner_staff.img ? item.owner_staff.img : BASE_IMG_URL+'headImg.png'" mode="scaleToFill"></image>
						<view>{{item.owner_staff ? item.owner_staff.name : '--'}}</view>
					</view>
				</view>
				<view class="info_footer" >
					<view class="footer_content" @click="newFollowClick(item.id,4)">
						<image :src="BASE_IMG_URL+'morebtn.png'"  mode="scaleToFill"></image>
						<view>跟进</view>
					</view>
					<view class="footer_content" @click="getaddCustomer(item.id)">
						<image :src="BASE_IMG_URL+'tj.png'"  mode="scaleToFill"></image>
						<view>转客</view>
					</view>
					<view class="footer_content" @click="toCall(item.mobile)">
						<image :src="BASE_IMG_URL+'dh.png'"  mode="scaleToFill"></image>
						<view>电话</view>
					</view>
	
				</view>
			</view>
			<view style="height: 200rpx;"></view>
			<u-empty margin-top="500rpx" v-if="list.length == 0" text="暂无更多"></u-empty>
		</view>
		
		<view class="btn_fix" @click="newCluesClick">
			<image :src="BASE_IMG_URL+'1.png'" mode="scaleToFill"></image>

		</view>
	</view>
</template>

<script>
	import { netCluesList } from '@/api/clues.js'
	import { netSearchStaffList,netAddkehu } from '@/api/kehu.js'
	import { BASE_IMG_URL } from '@/util/api.js'
	export default {
		data() {
			return {
				page:1,
				limit:10,
				totalPage:1,
				list:[],
				BASE_IMG_URL:BASE_IMG_URL,
				showSearch:false,
				name:'',
				type:'',   //客户分类  '0 全部客户','1 我的客户','2 下属负责的客户'
				typeList:['全部客户','我的客户','下属负责的客户'],
				typeIndex:null,
				start_time:'',
				end_time:'',
				ascripId:'',   //归属人id
				ascripList:[],  //归属人列表
				ascripIndex:null,
			}
		},
		onLoad(options) {
			if(options.startTime){
				this.typeIndex = options.type == 0 ? 1 : options.type == 1 ? 0 : null
				this.type = this.typeList[this.typeIndex]
				this.start_time = options.startTime
				this.end_time = options.endTime
				this.ascripId = options.staffid
			}
		},
		onShow() {
			this.list = []
			this.page = 1
			this.getList()
			
			//归属人
			this.getGuishu()
		},
		onReachBottom() {
			if(this.page >= this.totalPage) {
				return
			}
			this.page ++
			this.getList()
		},
		methods: {
			//搜索
			doSearch() {
				this.page = 1
				this.totalPage = 1
				this.list = []
				this.showSearch = false
				this.getList()
			},
			//归属人
			getGuishu() {
				netSearchStaffList().then(res=>{
					this.ascripList = res.data
					if(this.ascripId) {
						this.ascripList.forEach((ele,index)=>{
							if(ele.id == this.ascripId){
								this.ascripIndex = index
							}
						})
					}
				})
			},
			changeAscrip(e) {
				this.ascripIndex = e.detail.value
				this.ascripId = this.ascripList[this.ascripIndex].id
			},
			// 跟进
			newFollowClick(id,type) {
				uni.navigateTo({
					url:'/pagesA/crm/customerManagement/newFllow/newFllow?id='+id+'&type='+type
				})
			},
			//转客
			getaddCustomer(id) {
				uni.navigateTo({
					url:'/pagesA/crm/createCustomer/createCustomer?leads_id='+id
				})
			},
			// 更多
			moreClick(item) {
				uni.navigateTo({
					url:'/pagesA/crm/cluesManagement/cluesMore/cluesMore?id='+item.id
				})
			},
			// 新建线索
			newCluesClick() {
				uni.navigateTo({
					url:'/pagesA/crm/cluesManagement/newClues/newClues'
				})
			},
			//客户分类
			changeType(e) {
				this.typeIndex = e.detail.value
				this.type = this.typeList[e.detail.value]
			},
			//线索创建  开始时间
			changeStartTime(e) {
				this.start_time = e.detail.value
			},
			//线索 创建  结束时间
			changeEndTime(e) {
				this.end_time = e.detail.value
			},
			//重置
			reset() {
				this.name = ''
				this.type = ''
				this.typeIndex = null
				this.start_time = ''
				this.end_time = ''
				this.ascripId = null
				this.ascripIndex = null
				this.showSearch = false
				this.page = 1
				this.totalPage = 1
				this.list = []
				this.getList()
			},
			//确定
			sureQuery() {
				this.page = 1
				this.totalPage = 1
				this.list = []
				this.showSearch = false
				this.getList()
			},
			//搜索
			searchName(e) {
				console.log(e)
				this.name = e.detail
				this.list = []
				this.page = 1
				this.getList()
			},
			//线索 列表 
			getList() {
				let params = {
					page:this.page,
					limit:this.limit,
					name:this.name,
					createtime: (this.start_time && this.end_time) ? (this.start_time+','+this.end_time) : '',
					staff_id: this.ascripId,
					type:this.typeIndex
				}
				netCluesList(params).then(res=>{
					this.list = this.list.concat(res.data.data)
					this.totalPage = res.data.last_page
				})
			},
			// 电话
			toCall(phone) {
				// #ifdef MP-ALIPAY
				dd.showCallMenu({
				    phoneNumber: phone, // 期望拨打的电话号码
				    code: '+86', // 国家代号，中国是+86
				})
				// #endif
				// #ifdef MP-WEIXIN || H5 || APP-PLUS
				uni.makePhoneCall({
					phoneNumber:phone
				})
				// #endif
			},
			
		}
	}
</script>

<style lang="scss">
	.left_foot {
		padding-bottom: 20rpx;
		margin: 20rpx 0;
		.l_box {
			margin-right: 35rpx;
			float: left;
	
			span {
				background: rgba(3, 170, 150, .1);
				padding: 5rpx 12rpx;
				font-size: 26rpx;
				color: #03AA96;
				border-radius: 5rpx;
			}
		}
	}
	.valueactive{
		color:#333;
	}
	.select_warp{
		z-index: 9;
		position: relative;
	}
	.searchbox {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #03AA96;
		display: flex;
		justify-content: space-around;
		margin-bottom: 40rpx;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1;
	
		.tab_array {
			display: flex;
			background: #fff;
			border-radius: 34rpx;
			height: 68rpx;
			width: 467rpx;
			
			image {
				width: 50rpx;
				height: 50rpx;
				margin: 8rpx 15rpx 0 28rpx;
			}
		
			input {
				line-height: 68rpx;
				height: 68rpx;
			}
		}
		
		.searchtext {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 30rpx;
			color: #999;
			margin-right: 55rpx;
		}
	}
	.manage_tab {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #03AA96;
		display: flex;
		justify-content: space-around;
		margin-bottom: 40rpx;
		z-index: 1;
		.tab_array {
			display: flex;
			background: #fff;
			border-radius: 34rpx;
			height: 68rpx;
			width: 467rpx;
			overflow: hidden;
			image {
				width: 50rpx;
				height: 50rpx;
				margin: 8rpx 15rpx 0 28rpx;
			}
	
			input {
				line-height: 68rpx;
				height: 68rpx;
			}
		}
	
		.tab_screen {
			display: flex;
			image {
				width: 43rpx;
				height: 44rpx;
				margin-top: 10rpx;
			}
		}
	}
	.warpbox{
		width:750rpx;
		position: fixed;
		left:0;
		top:80rpx;
		bottom:0;
		z-index: 2;
		background:rgba(0,0,0,0.7);
		.screen_content {
			width:702rpx;
			z-index: 2;
			border-top:1rpx solid #CCCCCC;
			background-color: #fff;
			padding:24rpx;
			.fir_li{
				margin-bottom:20rpx;
				.li_label{
					font-size:28rpx;
					color:#333333;
					margin-bottom:15rpx;
				}
				.li_box{
					border-radius: 15rpx;
					border:1rpx solid #CCCCCC;
					height:60rpx;
					padding:0 35rpx;
					line-height: 60rpx;
				}
				.form_right {
					display: flex;
					color: #999;
					justify-content: space-between;
					image {
						width: 40rpx;
						height: 40rpx;
						margin: 28rpx 5rpx 0 0;
					}
					
				}
			}
		}
		.button_bottom {
			display: flex;
			width: 100%;
			height: 90rpx;
			background-color: #fff;
			line-height: 90rpx;
			text-align: center;
			font-size: 32rpx;
			:first-child {
				flex: 1;
				color: #03aa96;
				border-top:1rpx solid #CCCCCC;
			}
			:last-child {
				flex: 1;
				background-color: #03aa96;
				color: #fff;
			}
		}
	}
	.clues_content {
		// margin: 0 24rpx;
		// margin-top: 100rpx;
		.clues_item {
			background-color: #fff;
			border-radius: 10rpx;
			margin-top: 20rpx;
			padding:20rpx 24rpx;
			box-shadow: 2rpx 2rpx 50rpx rgba(0,0,0,0.1);
			.info_head {
				display: flex;
				justify-content: space-between;
			
				:first-child {
					font-size: 28rpx;
					font-weight: 700;
					color: #333;
				}
			
			}
			.info_main {
				display: flex;
				justify-content: space-between;
				padding-bottom: 20rpx;
				border-bottom: 1px solid #ededed;
				.main_left {
					.left_followUp {
						display: flex;
						padding: 20rpx 0;
						font-size: 30rpx;
						color: #666;
						margin: 20rpx 0;
					}
			
					.left_star {
						display: flex;
						padding-bottom: 20rpx;
						font-size: 30rpx;
						color: #666;
					}
				}
			
				.main_right {
					text-align: center;
					padding: 20rpx 20rpx 0 0;
			
					image {
						width: 129rpx;
						height: 129rpx;
						margin-bottom: 5rpx;
						border-radius: 50%;
					}
				}
			}

			.info_footer {
				display: flex;
				justify-content: space-around;
				padding-top: 30rpx;
				height: 80rpx;
			
				.footer_content {
					line-height: 80rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					image{
						width: 48rpx;
						height: 48rpx;
						margin-right: 15rpx;
					}
					.icon-iconmore-copy,
					.icon-follow {
						font-size: 22rpx;
					}
			
					.icon-follow,
					.icon-task,
					.icon-tel {
						margin-right: 5rpx;
					}
			
					.icon-iconmore-copy {
						margin-left: 5rpx;
						margin-top: 2rpx;
					}
				}
			}
		}
	}
	.btn_fix {
		position: fixed;
		bottom: 100rpx;
		right: 80rpx;
	
		image {
			width: 80rpx;
			height: 80rpx;
	
			background-color: #fff;
			border-radius: 40rpx;
		}
	}
</style>
